<template>
  <div>
    <a-card :title="title">
      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >生产组名</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">基数</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >固定比例</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >策划组</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">{{ base }}</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >
        <div>
          <div v-show="edit" style="left: -10px; width: 80%; top: -23px;text-align: left;" >
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate[0]"
              placeholder="请输入固定比率(%)"/>
          </div>
          <span v-show="!edit">{{ showRate(rate[0] ? (rate[0] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>

      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >UI设计、动效创意组</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">{{ base }}</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >
        <div>
          <div v-show="edit" style="left: -10px; width: 80%; top: -23px;text-align: left;" >
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate[1]"
              placeholder="请输入固定比率(%)"/>
          </div>
          <span v-show="!edit">{{ showRate(rate[1] ? (rate[1] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>

      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >程序组</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">{{ base }}</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >
        <div>
          <div v-show="edit" style="left: -10px; width: 80%; top: -23px;text-align: left;" >
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate[2]"
              placeholder="请输入固定比率(%)"/>
          </div>
          <span v-show="!edit">{{ showRate(rate[2] ? (rate[2] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>

      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >内容组(定制软件)</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">{{ base }}</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >
        <div>
          <div v-show="edit" style="left: -10px; width: 80%; top: -23px;text-align: left;" >
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate[3]"
              placeholder="请输入固定比率(%)"/>
          </div>
          <span v-show="!edit">{{ showRate(rate[3] ? (rate[3] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>

      <a-card-grid style="width: 30%;height: 80px; text-align: center" :hoverable="false" >硬件开发组(定制硬件)</a-card-grid>
      <a-card-grid style="width: 30%;height: 80px;text-align: center" :hoverable="false">{{ base }}</a-card-grid>
      <a-card-grid style="width: 40%;height: 80px; text-align: center" :hoverable="false" >
        <div>
          <div v-show="edit" style="left: -10px; width: 80%; top: -23px;text-align: left;" >
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentRate[4]"
              placeholder="请输入固定比率(%)"/>
          </div>
          <span v-show="!edit">{{ showRate(rate[4] ? (rate[4] * 100).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>
    </a-card>
  </div>
</template>
<script>
import { showRate } from './config'

export default {
  name: 'ProdRates',
  components: {
  },
  props: {
    title: {
      type: String,
      default: () => ''
    },
    rate: {
      type: Array,
      default: () => [undefined, undefined, undefined, undefined, undefined]
    },
    edit: {
      type: Boolean,
      default: () => false
    },
    base: {
      type: String,
      default: '合同额'
    }
  },
  watch: {
    edit: function (edit) {
      if (edit) {
        this.currentRate = this.rate.map(item => item ? item * 100 : undefined)
      }
    }
  },
  data () {
    this.showRate = showRate
    return {
      currentRate: [undefined, undefined, undefined, undefined, undefined]
    }
  },
  methods: {
    getValue () {
      /**
       * rate 固定提成比率
       */
      return {
        rate: this.currentRate.map(item => item / 100)
      }
    }
  }
}
</script>
